import React, { useEffect, useRef, CSSProperties } from 'react';

interface FullScreenWatermarkProps {
    text: string;
    angle?: number;
    fontSize?: number;
    color?: string;
    opacity?: number;
    zIndex?: number;
    className?: string;
    style?: CSSProperties;
}

const FullScreenWatermark: React.FC<FullScreenWatermarkProps> = ({
                                                                     text,
                                                                     angle = -20,
                                                                     fontSize = 16,
                                                                     color = 'rgba(0,0,0,0.4)',
                                                                     opacity = 0.1,
                                                                     zIndex = 9999,
                                                                     className = '',
                                                                     style = {},
                                                                 }) => {
    const canvasRef = useRef<HTMLCanvasElement>(null);

    useEffect(() => {
        const canvas = canvasRef.current;
        if (!canvas) return;

        const ctx = canvas.getContext('2d');
        if (!ctx) return;

        // 设置Canvas尺寸为窗口大小
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 清除Canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 设置字体样式
        ctx.font = `bold ${fontSize}px sans-serif`;
        ctx.fillStyle = color;
        ctx.globalAlpha = opacity;

        // 计算水印单元尺寸
        const unitWidth = 200;
        const unitHeight = 150;

        // 绘制重复水印
        for (let x = 0; x < canvas.width; x += unitWidth) {
            for (let y = 0; y < canvas.height; y += unitHeight) {
                ctx.save();
                ctx.translate(x + unitWidth / 2, y + unitHeight / 2);
                ctx.rotate((angle * Math.PI) / 180);
                ctx.fillText(text, -unitWidth / 4, 0);
                ctx.restore();
            }
        }
    }, [text, angle, fontSize, color, opacity]);

    // 监听窗口大小变化
    useEffect(() => {
        const handleResize = () => {
            const canvas = canvasRef.current;
            if (!canvas) return;

            // 重新设置Canvas尺寸
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            // 重新绘制水印
            const ctx = canvas.getContext('2d');
            if (!ctx) return;

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 设置字体样式
            ctx.font = `bold ${fontSize}px sans-serif`;
            ctx.fillStyle = color;
            ctx.globalAlpha = opacity;

            // 计算水印单元尺寸
            const unitWidth = 200;
            const unitHeight = 150;

            // 绘制重复水印
            for (let x = 0; x < canvas.width; x += unitWidth) {
                for (let y = 0; y < canvas.height; y += unitHeight) {
                    ctx.save();
                    ctx.translate(x + unitWidth / 2, y + unitHeight / 2);
                    ctx.rotate((angle * Math.PI) / 180);
                    ctx.fillText(text, -unitWidth / 4, 0);
                    ctx.restore();
                }
            }
        };

        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, [text, angle, fontSize, color, opacity]);

    return (
        <canvas
            ref={canvasRef}
            className={`full-screen-watermark ${className}`}
            style={{
                position: 'fixed',
                top: 0,
                left: 0,
                pointerEvents: 'none',
                zIndex,
                ...style,
            }}
        />
    );
};

export default FullScreenWatermark;